<template>
  <div class="my">
    <!-- 头部 -->
    <header>
      <!--已登录  -->
      <div class="login banner" v-if="isLogin">
        <van-row></van-row>
        <van-row type="flex" align="center">
          <van-col span="11" offset="1">
            <van-row type="flex" align="center">
              <van-image
                round
                width="1.5rem"
                height="1.5rem"
                :src="userInfo.photo"
              />
              <span class="phoneNumer">{{ userInfo.name }}</span>
            </van-row>
          </van-col>
          <van-col span="6" offset="6">
            <van-row type="flex" align="center">
              <van-button
                type="default"
                size="mini"
                round
                class="edit-btn"
                @click="$router.push('/user')"
                >编辑资料</van-button
              >
            </van-row>
          </van-col>
        </van-row>
        <van-row>
          <van-grid class="grid" :border="false">
            <van-grid-item text="头条">
              <template #icon>{{ userInfo.art_count }}</template>
            </van-grid-item>
            <van-grid-item text="粉丝">
              <template #icon>{{ userInfo.fans_count }}</template>
            </van-grid-item>
            <van-grid-item text="关注">
              <template #icon>{{ userInfo.follow_count }}</template>
            </van-grid-item>
            <van-grid-item text="获赞">
              <template #icon>{{ userInfo.like_count }}</template>
            </van-grid-item>
          </van-grid>
        </van-row>
      </div>
      <!--未登录  -->
      <div class="logout banner" v-else>
        <!-- van-image不支持图片路径  -->
        <div class="img-wrap" @click="$router.push('/login')">
          <van-image width="1.76rem" height="1.76rem" :src="imgSrc" />
          <span class="text">登录 / 注册</span>
        </div>
      </div>
    </header>

    <!-- 主体 -->
    <main>
      <!-- 收藏/历史 -->
      <!-- v-bind：在属性的身上读取一个表达式结果 -->
      <!-- 插值表达式：在结构中读取表达式的结果 {{ }} -->
      <!-- 表达式 1：简单表达式：简单数据类型+复杂数据类型 表达式 2复杂表达式：运算符+问答表达式-->
      <div>
        <van-grid :column-num="2" clickable class="grid-2">
          <van-grid-item text="收藏">
            <template #icon>
              <span class="toutiao toutiao-shoucang"></span>
            </template>
          </van-grid-item>
          <van-grid-item text="历史">
            <template #icon>
              <span class="toutiao toutiao-lishi"></span>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 链接 -->
      <div class="link">
        <van-cell title="消息通知" is-link />
        <van-cell title="小智同学" is-link />
      </div>
    </main>

    <!-- 底部 -->
    <footer>
      <van-button class="exit" v-if="isLogin" block @click="logOut">
        退出登录
      </van-button>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import imgSrc from "@/assets/images/mobile.png";
import { getUserInfoAPI } from "@/api";
export default {
  data() {
    return {
      imgSrc,
      userInfo: {}
    };
  },
  created() {
    this.getUserInfo();
  },
  computed: {
    ...mapGetters(["isLogin"])
  },
  methods: {
    async logOut() {
      try {
        await this.$dialog.confirm({
          title: "黑马头条",
          message: "是否确认退出该账号"
        });
        this.$store.commit("SET_TOKEN", {});
      } catch {}
    },
    async getUserInfo() {
      // 登录了，才会发请求
      if (this.isLogin) {
        const { data } = await getUserInfoAPI();
        this.userInfo = data.data;
      }
    }
  }
};
</script>

<style scoped lang="less">
.my {
  height: calc(100vh - 100px);
  background-color: #f5f7f9;
}
.link {
  margin: 10px 0;
}
.banner {
  width: 100%;
  height: 5.33333rem;
  background: url("@/assets/images/banner.png") no-repeat 0 0 / cover;
}
.logout {
  display: flex;
  justify-content: center;
  .img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .text {
    font-size: 0.4rem;
    color: #fff;
    margin-top: 0.26667rem;
  }
}
.login {
  display: flex;
  flex-direction: column;
  > .van-row {
    flex: 1;
  }
  .phoneNumer {
    font-size: 0.4rem;
    color: #fff;
    margin-left: 0.4rem;
  }
  .edit-btn {
    height: 0.42667rem;
    margin-left: 50px;
  }
}
:deep(.grid) {
  color: #fff;
  background-color: transparent;
  .van-grid-item__content {
    background-color: unset;
  }
  .van-grid-item__text {
    color: #fff;
  }
  .van-grid-item__icon-wrapper {
    font-size: 0.4rem;
  }
}
.grid-2 {
  .toutiao {
    font-size: 40px;
  }
  .toutiao-shoucang {
    color: red;
  }
  .toutiao-lishi {
    color: orange;
  }
}
.exit {
  .van-button__content {
    color: red;
  }
}
</style>
